import { Space, Spin, Tree, Menu, Dropdown, DatePicker, Radio, InputNumber, Row, Col, Input, Form, Button } from 'antd';
import { TableOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
// import moment from 'moment';
// import { useEffect } from 'react';
import request from '../../request';
import { loadTable } from '../../redux/actions/main';
import { loadSdkTags } from '../../redux/actions/sdk-tags';
import { dateType, dateUnit } from '../../redux/actions/db';

function Db(props) {
    let table = '';
    const getMe = _=> props.tab.items.find(x => `${x.connectId}_${x.db.id}` === props.tab.active);
    // useEffect(_ => {
    //     let me = getMe();
    //     request('TablesByDb', { id: me.connectId, db: me.db.name }).then(x => props.loadTable({ tables: x.data, active: props.tab.active }))
    // }, []); // eslint-disable-line react-hooks/exhaustive-deps
    const makeNodes = _ => {
        let ns = getMe().tables;
        if (ns) return ns.map(x => ({
            title: x.name,
            key: x.name,
            isLeaf: true,
            data: x,
            icon: <TableOutlined />
        }));
        return [];
    };
    const onRightClick = e => table = e.node.key;
    const onSdk = _ => {
        let me = getMe();
        request('GenerateSdkTags', { id: me.connectId, db: 'HX_RTDB', tb: 'HX_SQL' }).then(x => props.loadSdkTags({ tags: x.data, isShow: true }));
    };
    const menu = _ => <Menu>
		<Menu.Item key="1" onClick={ _ => onSdk() }>Sdk关联点</Menu.Item>
	</Menu>;
    const onDateType = e => {
        if (e.target.value === 1) props.dateType({value: 1, rangeDisabled: false, unitDisabled: true});
        if (e.target.value === 2) props.dateType({value: 2, rangeDisabled: true, unitDisabled: false});
    };
    const onDateUnit = e => props.dateUnit(e.target.value);

    return <Spin spinning={ false }>
            <Form layout="inline">
                <Form.Item>
                    <Radio.Group value={props.state.dateType.value}><Radio value={1} onChange={onDateType}></Radio></Radio.Group>
                    <DatePicker.RangePicker defaultValue={props.state.dateRange} showTime disabled={props.state.dateType.rangeDisabled} />
                </Form.Item>
                <Form.Item>
                    <Radio.Group value={props.state.dateType.value}><Radio value={2} onChange={onDateType}></Radio></Radio.Group>
                    <InputNumber max={-1}  disabled={props.state.dateType.unitDisabled} />
                    <Radio.Group
                        options={[{label:'天',value:'d'},{label:'时',value:'h'},{label:'分',value:'m'},{label:'秒',value:'s'}]}
                        onChange={onDateUnit}
                        disabled={props.state.dateType.unitDisabled}
                        value={props.state.dateUnit}
                        optionType="button"
                        buttonStyle="solid" />
                </Form.Item>
            </Form>
            <Button onClick={onSdk}>sdk</Button>
            {/* <Form>
                <Form.Item>
                    <Input placeholder="field名" />
                </Form.Item>
            </Form>
            
            <Row>
                <Col span={8}>
                    <Dropdown overlay={menu} trigger={['contextMenu']}>
                        <Tree showIcon treeData={ makeNodes() } blockNode={true} onRightClick={onRightClick} />
                    </Dropdown>
                </Col>
                <Col span={16}></Col>
            </Row> */}
        </Spin>
}

export default connect(
    s => ({ tab: s.main, state: s.db }),
    { loadTable, loadSdkTags, dateType, dateUnit }
)(Db);